@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('user.layouts.navbar')
        @include('user.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('games.index') }}">发布记录</a></li>
                                <li class="breadcrumb-item active" aria-current="page">发布</li>
                            </ol>
                        </nav>

                        <div class="card">
                            <div class="card-body">

                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>服务器名称：</label>
                                            <input type="text" class="form-control" id="server_name" maxlength="8">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>服务器IP：</label>
                                            <input type="text" class="form-control" id="server_ip" maxlength="8">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>线路：</label>
                                            <input type="text" class="form-control" id="network" maxlength="7">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>详细版本介绍：</label>
                                            <input type="text" class="form-control" id="introduction" maxlength="20">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-row">
                                            <div class="col-lg-9">
                                                <div class="form-group">
                                                    <label>客服QQ：</label>
                                                    <input type="text" class="form-control" id="qq" maxlength="15">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group" >
                                                    <label>发布数量：<small class="text-danger">(连体广告)</small></label>
                                                    <input type="text" class="form-control" id="count" value="1" maxlength="15" onkeyup="total()">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>游戏主页：
                                                <small class="text-danger">(注意：主页必须以http:// 或 https:// 开头)</small>
                                            </label>
                                            <input type="url" class="form-control" id="url" value="http://" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <label>开机时间：</label>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group">
                                                    <input type="date" class="form-control" id="date" value="{{ date('Y-m-d') }}" placeholder="年/月/日">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="hour">
                                                        <option value=""> 请选择时</option>
                                                        <option value="07">07</option>
                                                        <option value="08">08</option>
                                                        <option value="09">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                        <option value="13">13</option>
                                                        <option value="14">14</option>
                                                        <option value="15">15</option>
                                                        <option value="16">16</option>
                                                        <option value="17">17</option>
                                                        <option value="18">18</option>
                                                        <option value="19">19</option>
                                                        <option value="20">20</option>
                                                        <option value="21">21</option>
                                                        <option value="22">22</option>
                                                        <option value="23">23</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="minute">
                                                        <option value=""> 请选择分钟</option>
                                                        <option value="00">00</option>
                                                        <option value="30">30</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-5">
                                        <label>广告类型：<a href="#" data-toggle="modal"
                                                       data-target="#AdType">类型说明</a></label>
                                        <div class="form-row" onchange="total()">
                                            <div class="col">
                                                <div class="form-group">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" id="yellow"
                                                               value="{{ $price[0]->yellow }}">
                                                        <label class="custom-control-label" for="yellow">套黄</label>
                                                    </div>
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="all_day_yellow" value="{{ $price[0]->all_day_yellow }}">
                                                        <label class="custom-control-label"
                                                               for="all_day_yellow">全天套黄</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="overnight" value="{{ $price[0]->overnight }}">
                                                        <label class="custom-control-label" for="overnight">通宵推荐</label>
                                                    </div>
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="fixed_overnight"
                                                               value="{{ $price[0]->fixed_overnight }}">
                                                        <label class="custom-control-label"
                                                               for="fixed_overnight">固顶通宵</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="all_day_boutique"
                                                               value="{{ $price[0]->all_day_boutique }}">
                                                        <label class="custom-control-label"
                                                               for="all_day_boutique">全天精品</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <button class="btn btn-primary" onclick="operation_tip()">提交</button>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>合计: <span class="text-danger" id="priceTotal">¥0</span></label>
                                        </div>
                                    </div>

                                </div> <!-- .row -->
                            </div> <!-- .card-body -->
                        </div> <!-- .card -->

                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    <!-- 广告类型说明 -->
    <div class="modal fade" id="AdType" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">广告类型说明</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        <span style="color: rgb(84, 141, 212);"><strong>套 黄：</strong></span><strong>从开机时间开始
                            置顶半小时，显示在背景颜色为浅黄色<span style="color: #ffff98;">███ </span>的位置，半小时后掉到背景颜色为深黄色<span
                                    style="color: #ffff00;">███</span>的位置，显示时长为：开机时间至凌晨12点。</strong>
                    </p>
                    <p>
                            <span
                                    style="color: rgb(84, 141, 212);"><strong>全天套黄：</strong></span><strong>全天显示在背景颜色为浅黄色<span
                                    style="color: #ffff98;">███ </span>的位置。</strong>
                    </p>
                    <p>
                        <span style="color: rgb(84, 141, 212);"><strong>通宵推荐：</strong></span><strong>凌晨12点至早上7点显示在背景颜色为浅黄色<span
                                    style="color: rgb(255, 255, 152);">███</span>的位置并且<span
                                    style="color: rgb(255, 0, 0);">〖通宵推荐〗</span></strong>
                    </p>
                    <p>
                        <span style="color: rgb(84, 141, 212);"><strong>固顶通宵：</strong></span><strong>凌晨12点至早上7点显示在背景颜色为浅黄色<span
                                    style="color: rgb(255, 255, 152);">███</span>的位置并且<span
                                    style="color: rgb(255, 0, 0);">【固顶通宵】</span>（显示在〖通宵推荐〗上面）。</strong>
                    </p>
                    <p>
                            <span
                                    style="color: rgb(84, 141, 212);"><strong>全天固顶：</strong></span><strong>全天显示在背景颜色为浅黄色<span
                                    style="color: #ffff98;">███ </span>的位置。 显示 <span
                                    style="color: rgb(255, 0, 0);">本站域名</span><span
                                    style="color: #800080;">-精品极力推荐</span>。</strong>
                    </p>
                    <p>
                        <span style="color: rgb(84, 141, 212);"><strong>发布说明：</strong></span><strong>当天<span
                                    style="color: rgb(255, 0, 0);">已开放</span>和<span
                                    style="color: rgb(255, 0, 0);">未开放</span>的都还会显示在背景颜色为深黄色<span
                                    style="color: #ffff00;">███</span>的位置。
                            本站显示明天和后天以及更往后的日期。只收取当日广告费。这样您可以更提前的发布游戏信息。</strong>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script>

        //合计总价格
        function total() {
            let yellow = $('#yellow').is(':checked') ? parseInt($("#yellow").attr('value')) : 0;
            let allDayYellow = $('#all_day_yellow').is(':checked') ? parseInt($("#all_day_yellow").attr('value')) : 0;
            let overnight = $('#overnight').is(':checked') ? parseInt($("#overnight").attr('value')) : 0;
            let FixedOvernight = $('#fixed_overnight').is(':checked') ? parseInt($("#fixed_overnight").attr('value')) : 0;
            let allDayBoutique = $('#all_day_boutique').is(':checked') ? parseInt($("#all_day_boutique").attr('value')) : 0;

            let priceTotal = (yellow + allDayYellow + overnight + FixedOvernight + allDayBoutique)*$('#count').val();
            $('#priceTotal').html('¥' + priceTotal)
        }

        let isLoading = false;

        //提交
        function submit() {

            if (!$('#server_name').val()) {
                toast('服务器名称 不能为空');
                return false
            }
            if (!$('#server_ip').val()) {
                toast('服务器IP 不能为空。');
                return false
            }
            if (!$('#network').val()) {
                toast('线路 不能为空。');
                return false
            }
            if (!$('#introduction').val()) {
                toast('版本介绍 不能为空。');
                return false
            }
            if (!$('#qq').val()) {
                toast('客服QQ 不能为空。');
                return false
            }
            if( !$('#count').val()){
                toast('连体数量 不能为空。');
                return false
            }
            if (!$('#url').val()) {
                toast('游戏主页 不能为空。');
                return false
            }
            if (!$('#date').val()) {
                toast('请选择 开机日期。');
                return false
            }

            let data = new Date();
            let year = data.getFullYear();              // 从 Date 对象以四位数字返回年份。
            let month = data.getMonth() + 1;            // 从 Date 对象返回月份 (0 ~ 11)。
            let strDate = data.getDate();               // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            let systemData = year + "-" + month + "-" + strDate;

            if ($('#date').val() < systemData) {
                toast('开机日期 不能小于当前日期。');
                return false
            }

            if (!$('#hour option:selected').val()) {
                toast('开机时钟 不能为空。');
                return false
            }

            if (!$('#minute option:selected').val()) {
                toast('开机分钟 不能为空。');
                return false
            }
            if (!$('#yellow').is(':checked') && !$('#all_day_yellow').is(':checked') && !$('#overnight').is(':checked') && !$('#fixed_overnight').is(':checked') && !$('#all_day_boutique').is(':checked')) {
                toast('广告类型至少选择一项。');
                return false
            }

            if (isLoading === false) {
                isLoading = true;

                let isYellow = $('#yellow').is(':checked') ? 1 : 0;
                let isAllDayYellow = $('#all_day_yellow').is(':checked') ? 1 : 0;
                let isOvernight = $('#overnight').is(':checked') ? 1 : 0;
                let isFixedOvernight = $('#fixed_overnight').is(':checked') ? 1 : 0;
                let isAllDayBoutique = $('#all_day_boutique').is(':checked') ? 1 : 0;

                axios.post('{{ route('games.store') }}', {
                    type: isYellow + ',' + isAllDayYellow + ',' + isOvernight + ',' + isFixedOvernight + ',' + isAllDayBoutique,
                    server_name: $('#server_name').val(),
                    server_ip: $('#server_ip').val(),
                    open_time: $('#date').val() + ' ' + $('#hour').val() + ':' + $('#minute').val(),
                    network: $('#network').val(),
                    introduction: $('#introduction').val(),
                    qq: $('#qq').val(),
                    count: $('#count').val(),
                    url: $('#url').val(),
                })
                    .then(function (response) {
                        isLoading = false;
                        toast(response.data.message);
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }
    </script>

    </body>

@endsection
